<template>
    <div class="grade-list-card">
        <n-card
              :title="`${studentNumber}的成绩`"
              hoverable
        >
            <div class="card-content">
                <div class="query-container">
                    <n-space>
                        <n-input
                              clearable
                              v-model:value="keyword"
                        />
                        <n-button
                              type="primary"
                              @click="searchGrade"
                        >
                            搜索
                        </n-button>
                    </n-space>
                </div>
                <div class="table-container">
                    <n-data-table
                          :columns="columns"
                          :pagination="pagination"
                          :data="gradeList"
                          :row-key="row => row.gradeName"
                    />
                </div>
            </div>
        </n-card>
    </div>
</template>

<script>
import { defineComponent, h, ref } from 'vue'
import api from '../api'
import { useMessage, NButton } from 'naive-ui'
import { useStore } from 'vuex'

export default defineComponent({
    name: 'ShowGradeList',
    props: {
        studentNumber: {
            type: String,
            default: ''
        }
    },
    
    beforeRouteEnter(to, from, next) {
        next((vm) => vm.getGradeList())
    },
    
    setup(props) {
        window.$message = useMessage()
        const store = useStore()
        const keyword = ref('')
        const gradeList = ref([])
        const getGradeList = async () => {
            const resp = await api.grade.getGrades(props.studentNumber, store.state.schoolName, '')
            gradeList.value = resp.data
        }
        const searchGrade = async () => {
            const resp = await api.grade.getGrades(props.studentNumber, store.state.schoolName,keyword.value)
            gradeList.value = resp.data
        }
        return {
            keyword,
            gradeList,
            getGradeList,
            searchGrade,
            columns: [
                {
                    title: '课程名称',
                    key: 'gradeName',
                    align: 'center'
                },
                {
                    title: '成绩',
                    key: 'gradePoint',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    render(row) {
                        return h(
                            NButton,
                            {
                                type: 'error',
                                onClick: async () => {
                                    await api.grade.deleteGrade(props.studentNumber, row.gradeName)
                                    await getGradeList()
                                }
                            },
                            { default: () => '删除' }
                        )
                    }
                }
            ]
        }
    },
    data() {
        return{
            pagination: {
                pageSize: 10
            }
        }
    },
    methods: {
    }
})
</script>

<style scoped lang="less">
.grade-list-card {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10%;
    .n-card {
        width: 80%;
        height: 80%;
        
        .query-container {
            margin-bottom: 3%;
            display: flex;
        }
    }
}
</style>